<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="../undo.js"></script>
	<script src="../vendor/jquery-1.5.1.js"></script>
	<title>Undo.js demo</title>
	<style>
		body { font:62.5% Verdana,Arial,sans-serif; }
	</style>
	<script>
	$(function() {
		var stack = new Undo.Stack(),
			UpCommand = Undo.Command.extend({
				constructor: function(li) {
					this.li = li;
				},
				execute: function() {
					this.li.insertBefore(this.li.prev());
				},
				undo: function() {
					this.li.insertAfter(this.li.next());
				}
			}),
			DownCommand = UpCommand.extend({
				execute: UpCommand.prototype.undo,
				undo: UpCommand.prototype.execute,
			});
		stack.changed = function() {
			stackUI();
			listUI();
		};
		
		var undo = $(".undo"),
			redo = $(".redo"),
			dirty = $(".dirty");
		function stackUI() {
			undo.attr("disabled", !stack.canUndo());
			redo.attr("disabled", !stack.canRedo());
			dirty.toggle(stack.dirty());
		}
		function listUI() {
			$("ul li button").attr("disabled", false);
			$("ul li:first .up").attr("disabled", true);
			$("ul li:last .down").attr("disabled", true);
		}
		stackUI();
		listUI();
		
		$(document.body).delegate(".undo, .redo, .save", "click", function() {
			var what = $(this).attr("class");
			stack[what]();
			return false;
		})
		$(document.body).delegate(".up, .down", "click", function() {
			var what = $(this).attr("class");
			if (what == "up") {
				stack.execute(new UpCommand($(this).parent()));
			} else {
				stack.execute(new DownCommand($(this).parent()));
			}
			return false;
		})
	});
	</script>
</head>
<body>
	<button class="undo" href="#">Undo</button>
	<button class="redo" href="#">Redo</button>
	<button class="save" href="#">Save<span class="dirty">*</span></button>
	<ul>
		<li>
			<span>1. item</span>
			<button class="up" href="#">Up</button>
			<button class="down" href="#">Down</button>
		</li>
		<li>
			<span>2. item</span>
			<button class="up" href="#">Up</button>
			<button class="down" href="#">Down</button>
		</li>
		<li>
			<span>3. item</span>
			<button class="up" href="#">Up</button>
			<button class="down" href="#">Down</button>
		</li>
		<li>
			<span>4. item</span>
			<button class="up" href="#">Up</button>
			<button class="down" href="#">Down</button>
		</li>
		<li>
			<span>5. item</span>
			<button class="up" href="#">Up</button>
			<button class="down" href="#">Down</button>
		</li>
	</ul>
	
	<a href="contenteditable.html">Contenteditable Demo</a>
</body>
</html>